<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>提货订单</title>
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/news.css}" media="all"/>
</head>
<body class="childrenBody">
<blockquote class="layui-elem-quote news_search" style="min-width: 1680px;">
    <form id="searchForm" name="searchForm" class="layui-form" action="pickOrderEntry.html">
        <input type="hidden" id="pageNum" name="pageNum" th:value="${page.pageNum}"/>
        <input type="hidden" id="pageSize" name="pageSize" th:value="${page.pageSize}"/>
        <div class="layui-form-item" style="margin-left: -30px;margin-bottom: 2px;">
            <label class="layui-form-label">订单编号:</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="orderNo" th:value="${vo.orderNo}"/>
            </div>
            <label class="layui-form-label">用户名:</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="userName" th:value="${vo.userName}"/>
            </div>
            <label class="layui-form-label">产品名称:</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="productName" th:value="${vo.productName}"/>
            </div>
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="orderState" lay-filter="status">
                    <option value="">选择查询提货状态</option>
                    <option value="10" th:selected="${vo.orderState}ne null  and ${vo.orderState == 10}">待发货</option>
                    <option value="11" th:selected="${vo.orderState}ne null  and ${vo.orderState == 11}">物流中</option>
                    <option value="12" th:selected="${vo.orderState}ne null  and ${vo.orderState == 12}">已收货</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: -30px;margin-bottom: 2px;margin-top: 12px;">
            <label class="layui-form-label">提货时间:</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="startTime"
                       th:value="${vo.startTime}?${#dates.format(vo.startTime,'yyyy-MM-dd HH:mm:ss')}" id="startTime"/>
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="endTime"
                       th:value="${vo.endTime}?${#dates.format(vo.endTime,'yyyy-MM-dd HH:mm:ss')}" id="endTime"/>
            </div>
            <button class="layui-btn search_btn"><i class="layui-icon">&#xe615;</i>查询</button>
            <!--<a class="layui-btn layui-btn-normal newsAdd_btn" id="add"><i class="layui-icon">&#xe608;</i>添加</a>-->
            <a class="layui-btn excel_btn"><i class="layui-icon">&#xe615;</i>导出</a>
        </div>
    </form>
</blockquote>
<div class="layui-form news_list" style="min-width: 1680px;">
    <table class="layui-table">
        <thead>
        <tr>
            <th>订单编号</th>
            <th>用户OpenId</th>
            <th>用户名称</th>
            <th>产品编号</th>
            <th>产品名称</th>
            <th>产品金额</th>
            <th>提货状态</th>
            <th>收货地址</th>
            <th>快递公司</th>
            <th>快递单号</th>
            <th>快递费用</th>
            <th>提货时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody class="news_content">
        <th:block th:if="${not #lists.isEmpty(page.list)}">
            <tr th:each="item:${page.list}">
                <td th:text="${item.orderNo}"></td>
                <td th:text="${item.openId}"></td>
                <td th:text="${item.userNickName}"></td>
                <td th:text="${item.productCode}"></td>
                <td th:text="${item.productName}"></td>
                <td th:text="${item.buyAmount}"></td>
                <th:block th:switch="${item.orderStatus}">
                    <td th:case="10" style="color: #b22222">待发货</td>
                    <td th:case="11" style="color: #009688">物流中</td>
                    <td th:case="12" style="color: #eb7350">已收货</td>
                </th:block>
                <td>
                    <a class="viewBtn" style="cursor:pointer;color: #1E9FFF;" th:data="${item.addressId}">查看</a>
                </td>
                <td th:text="${item.expressCompany}"></td>
                <td th:text="${item.expressNo}"></td>
                <td th:text="${item.expressFee}"></td>
                <th:block th:if="${item.orderStatus ne 12}">
                    <td th:text="${item.updateTime}?${#dates.format(item.updateTime,'yyyy-MM-dd HH:mm:ss')}:''"></td>
                </th:block>
                <th:block th:if="${item.orderStatus eq 12}">
                    <td th:text="${item.finishTime}?${#dates.format(item.finishTime,'yyyy-MM-dd HH:mm:ss')}:''"></td>
                </th:block>
                <!--<td th:text="${item.updateTime}?${#dates.format(item.updateTime,'yyyy-MM-dd HH:mm:ss')}"></td>-->
                <td>
                    <th:block th:switch="${item.orderStatus}">
                        <a th:data="${item.orderNo}" th:case="10" class="layui-btn layui-btn-mini add_express order_no">
                            <i class="layui-icon">&#xe642;</i>填写物流信息</a>
                    </th:block>
                    <th:block th:switch="${item.orderStatus}">
                        <a th:case="11" th:data="${item.expressNo}"
                           class="layui-btn layui-btn-mini product_info">查看物流</a>
                    </th:block>
                </td>
            </tr>
        </th:block>
        </tbody>
    </table>
</div>
<div id="paged" align="right"></div>
<div id="addExpress" style="display: none; padding-top:20px ">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">快递公司:</label>
            <div class="layui-input-inline">
                <select id="expressCompany" name="expressCompany" lay-verify="required" lay-search=""
                        data-placeholder="直接选择或搜索选择">
                    <option th:each="express:${express}" th:value="${express.name}" th:text="${express.name}">快递公司名称
                    </option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">快递单号:</label>
            <div class="layui-input-inline">
                <input type="text" value="" name="expressNo" id="expressNo" class="layui-input search_input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">快递费:</label>
            <div class="layui-input-inline">
                <input type="text" value="" name="expressFee" id="expressFee" class="layui-input search_input"/>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top:40px;">
            <input type="hidden" name="orderId" id="orderId">
            <div class="layui-input-block">
                <div class="layui-layer-btn layui-inline">
                    <button class="layui-btn sendReason" lay-submit="" lay-filter="inSubmit" name="type"
                            id="inSubmit" value="1">提交
                    </button>
                    <button type="reset" class="layui-btn">重置</button>
                </div>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/jquery/jquery-3.2.1.min.js}"></script>
</body>
<script th:inline="javascript">
    layui.use(['laypage', 'form'], function () {
        var laypage = layui.laypage, $ = layui.jquery;
        //执行一个laypage实例
        laypage.render({
            elem: 'paged', //注意，这里的 test1 是 ID，不用加 # 号
            curr: [[${page.pageNum}]],
            count: [[${page.total}]], //数据总数，从服务端得到
            limit: [[${page.pageSize}]],
            layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
            jump: function (obj, first) {
                //得到了当前页，用于向服务端请求对应数据
                var curr = obj.curr;
                var limit = obj.limit;
                $("#pageSize").val(limit);
                $("#pageNum").val(curr);
                if (!first) {
                    $("#searchForm").submit();
                }
            }
        });
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

        //……

        //但是，如果你的HTML是动态生成的，自动渲染就会失效
        //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
        form.render();
        //导出excel
        $(".excel_btn").bind("click", function () {
            location.href = '/order/pickOrderExcel?' + $("#searchForm").serialize();
        });
    });
    //查询物流
    $(".product_info").bind("click", function () {
        var expressNo = $(this).attr("data");
        //Ajax获取
        $.post('/order/expressView.html', {expressNo: expressNo}, function (data) {
            layer.open({
                type: 1,
                title: '查看物流信息'
                , area: ['1000px', '460px']
                , shade: 0
                , content: data
                , yes: function (index, layero) {
                    layer.close(index);
                }
            });
        });
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#startTime' //指定元素
            , type: 'datetime'
            , format: 'yyyy-MM-dd HH:mm:ss'
            , max: 1
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#endTime' //指定元素
            , type: 'datetime'
            , format: 'yyyy-MM-dd HH:mm:ss'
            , max: 1
        });
    });

    layui.use('layer', function () {
        var layer = layui.layer, $ = layui.jquery;
        var form = layui.form;
        //填写物流信息open面板
        $(".add_express").bind("click", function () {
            var orderNo = $(this).attr("data");
            $("#orderId").val(orderNo);
            layer.open({
                type: 1,
                title: "物流信息",
                content: $('#addExpress'),
                area: ['360px', '400px'],
                yes: function (index, layero) {
                    if (!$(".desc").val()) return;
                }
            });
        });
        //填写物流信息
        $("#inSubmit").bind("click", function () {
            var expressCompany = $("#expressCompany").val();
            var expressNo = $("#expressNo").val();
            var expressFee = $("#expressFee").val();
            var orderId = $("#orderId").val();
            $.ajax({
                type: "post",
                url: "/order/addExpress.html",
                async: false,
                data: {
                    expressCompany: expressCompany,
                    expressNo: expressNo,
                    expressFee: expressFee,
                    orderId: orderId
                },
                dataType: "json",
                success: function (result) {
                    if (result == 200) {
                        location.href = "pickOrderEntry.html"
                    }
                }
            });
        });

        //删除
        $(".message_del").bind("click", function () {
            var id = $(this).attr("data");
            layer.confirm('确定要删除吗?', {
                    icon: 3,
                    skin: 'layui-layer-lan',
                    closeBtn: 0
                },
                function () {
                    $.get("toDelete.html?id=" + id, function (datas) {
                        console.log(datas);
                        var result = JSON.parse(datas);
                        if (result.code > 0) {
                            layer.msg(result.msg, {
                                time: 2000, //3s后自动关闭
                            });
                            setTimeout(function () {
                                location.reload(true);
                            }, 500);
                        } else {
                            layer.msg(result.msg, {
                                time: 1000, //1s后自动关闭
                            });
                            setTimeout(function () {
                                location.reload(true);
                            }, 500)
                        }
                    })
                }, function () {
                });
        });


        //编辑
        $(".message_edit").bind("click", function () {
            var id = $(this).attr("data");
            console.log(id);
            //Ajax获取
            $.post('toEdit.html', {"id": id}, function (data) {
                layer.open({
                    type: 1,
                    title: "编辑消息"
                    , area: ['900px', '460px']
                    , shade: 0
                    , content: data
                    , yes: function (index, layero) {
                        layer.close(index);
                    }
                });
            });
        });

        //推送
        $(".message_push").bind("click", function () {
            var id = $(this).attr("data");
            layer.confirm('确认推送吗?', {icon: 3, title: '提醒'}, function (index) {
                //Ajax获取
                $.post('pushMessage', {id: id}, function (data) {
                    if (data) {
                        $("#searchForm").submit();
                        layer.close(index);
                    } else {
                        layer.msg("推送失败请稍后再试");
                    }
                });
            });
        });

        //新增
        $("#add").bind("click", function () {
            $.get('toInsert.html', function (data) {
                layer.open({
                    type: 1,
                    title: "添加消息"
                    , area: ['680px', '450px']
                    , shade: 0
                    , content: data
                    , yes: function (index, layero) {
                        layer.close(index);
                    }
                });
            });
        });

        function form_html(id, title) {
            $.post('messageAdd.html', {id: id}, function (data) {
                layer.open({
                    type: 1,
                    title: title
                    , area: ['680px', '450px']
                    , shade: 0
                    , content: data
                    , yes: function (index, layero) {
                        layer.close(index);
                    }
                });
            });
        };
        $(".viewBtn").bind('click', function () {
            var attr = $(this).attr("data");
            //Ajax获取
            $.post('/user/viewAddress.html', {"addressId": attr}, function (data) {
                layer.open({
                    type: 1,
                    title: "查看"
                    , area: ['600px', '300px']
                    , shade: 0
                    , content: data
                    , yes: function (index, layero) {
                        layer.close(index);
                    }
                });
            });
        })
    });

    layui.use('form', function () {
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

        //……

        //但是，如果你的HTML是动态生成的，自动渲染就会失效
        //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
        form.render();
    });

</script>
</html>